<template>
  <div class="pt10 pl10 bt_EBEEF5 DataMaintenance-groupInformationSet-baseInfo">
    <div class="right-btn">
      <el-button type="primary" size="mini" v-if="showCheck" @click="Check">{{
        $t("views.Set.groupInformation.50zhrfr04yw0")
      }}</el-button>
      <el-button type="primary" size="mini" v-if="showEdit" @click="Edit">{{
        $t("views.Set.groupInformation.50zhrfr05i40")
      }}</el-button>
    </div>
    <div
      class="groupInformationSet-baseInfo"
      @click="showMenu = false"
    >
      <div class="body pt12 pb12">
        <div class="info" v-if="showEdit">
          <el-form
            label-width="120px"
            :model="companyData"
            status-icon
            ref="editform"
          >
            <el-form-item
              :label="$t('views.Set.groupInformation.50zhrfr05xw0')"
              prop="company_code"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr06bs0')"
                disabled
                v-model="companyData.company_code"
              ></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('views.Set.groupInformation.50zhhyf77j00')"
              prop="company_cnname"
              :rules="[
                {
                  required: true,
                  message: $t('views.Set.groupInformation.50zhsr5hk5s0'),
                },
              ]"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr06bs0')"
                disabled
                v-model="companyData.company_cnname"
              ></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9a6e00')"
              prop="company_brief"
            >
              <el-input
                type="textarea"
                :placeholder="$t('views.Set.groupInformation.50zhrfr06pc0')"
                v-model="companyData.company_brief"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9a8080')"
              prop="company_name"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr071s0')"
                v-model="companyData.company_name"
              ></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9a8co0')"
              prop="company_position"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr07e00')"
                v-model="companyData.company_position"
              ></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9a8no0')"
              prop="company_mobile"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr07rk0')"
                v-model="companyData.company_mobile"
              ></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9a8z00')"
              prop="company_address"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr085c0')"
                v-model="companyData.company_address"
              ></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9a9ao0')"
              prop="company_homeurl"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr08k00')"
                v-model="companyData.company_homeurl"
              ></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9a9lw0')"
              prop="company_fax"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr08yg0')"
                v-model="companyData.company_fax"
              ></el-input>
            </el-form-item>

            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9a9wc0')"
              prop="company_email"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr09ao0')"
                v-model="companyData.company_email"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('views.Set.groupInformation.50zhiu9aa800')"
              prop="saleman_tephone"
            >
              <el-input
                :placeholder="$t('views.Set.groupInformation.50zhrfr09no0')"
                disabled
                v-model="companyData.saleman_tephone"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="info" v-if="showCheck">
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr05xw0") }}</em>
            <span>{{ companyData.company_code }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0a0g0") }}</em>
            <span>{{ companyData.company_cnname }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0ae80") }}</em>
            <span>{{ companyData.company_brief }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0asc0") }}</em>
            <span>{{ companyData.company_name }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0b540") }}</em>
            <span>{{ companyData.company_position }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0bkg0") }}</em>
            <span>{{ companyData.company_mobile }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0c3w0") }}</em>
            <span>{{ companyData.company_address }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0clg0") }}</em>
            <span>{{ companyData.company_homeurl }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0cx00") }}</em>
            <span>{{ companyData.company_fax }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0dbo0") }}</em>
            <span>{{ companyData.company_email }}</span>
          </p>
          <p>
            <em>{{ $t("views.Set.groupInformation.50zhrfr0dn80") }}</em>
            <span>{{ companyData.saleman_tephone }}</span>
          </p>
        </div>

        <div class="upload">
          <p class="upload-img__title">
            {{ $t("views.Set.groupInformation.50zhrfr0dy00") }}
          </p>
          <el-upload
            v-if="!showEdit"
            name="ossfile"
            :show-file-list="false"
            :action="`${$urls.gmcApiUrl}/Uploading/Picture`"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :data="Uploadimg"
            disabled
          >
            <img
              :src="this.companyData.company_logo"
              v-if="this.companyData.company_logo"
              class="img-url"
            />
            <!-- <i class="el-icon-upload"></i> -->
            <div
              class="el-upload__text company-upload"
              v-if="!this.companyData.company_logo"
            >
              {{ $t("views.Set.groupInformation.50zhrfr0e940") }}
            </div>
          </el-upload>
          <el-upload
            v-if="showEdit"
            name="ossfile"
            :show-file-list="false"
            action="http://gmcapi.kidcastle.org/Uploading/Picture"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :data="Uploadimg"
            drag
          >
            <img :src="company_imgurl" v-if="company_imgurl" class="img-url" />
            <template v-if="!company_imgurl">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                {{ $t("views.Set.groupInformation.50zhrfr0ej80") }}
                <em>{{ $t("views.Set.groupInformation.50zhrfr0eu80") }}</em>
              </div>
            </template>
          </el-upload>
          <p class="upload-img__tips">
            {{ $t("views.Set.groupInformation.50zhrfr0f5c0") }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import setHttp from "../../Set";
export default {
  name: "DataMaintenance-groupInformationSet-baseInfo",
  components: {},
  data() {
    return {
      fileList2: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      companyData: {},
      showEdit: false,
      showCheck: true,
      company_imgurl: "",
      Uploadimg: {
        ossfile: "",
        company_id: this.$userDetails.companyId,
      },
    };
  },
  created() {
    this.getCompany();
  },
  watch: {},
  methods: {
    getCompany() {
      setHttp.getCompany({}).then((res) => {
        if (res.data.error == 0) {
          this.companyData = res.data.result.data[0];
          this.company_imgurl = this.companyData.company_logo;
          console.log(res.data.result.data[0]);
        }
      });
    },
    updateCompanyAction() {
      setHttp
        .updateCompanyAction({
          company_cnname: this.companyData.company_cnname,
          company_brief: this.companyData.company_brief,
          company_code: this.companyData.company_code,
          company_name: this.companyData.company_name,
          company_position: this.companyData.company_position,
          company_mobile: this.companyData.company_mobile,
          company_address: this.companyData.company_address,
          company_homeurl: this.companyData.company_homeurl,
          company_fax: this.companyData.company_fax,
          company_email: this.companyData.company_email,
          company_phone: this.companyData.saleman_tephone,
          company_logo: this.company_imgurl,
        })
        .then((res) => {
          if (res.data.error == 0) {
            (this.showEdit = false), (this.showCheck = true), this.getCompany();
            this.$message({ message: res.data.errortip, type: "success" });
            this.$Tool.setStorage("COMPANY_LOGO", this.company_imgurl);
            this.$store.dispatch("setCompany_Logo", this.company_imgurl);
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 显示查看
    Check() {
      this.showEdit = true;
      this.showCheck = false;
    },

    // 显示编辑
    Edit() {
      this.updateCompanyAction();
    },
    handleAvatarSuccess(res, file) {
      console.log(file, "12345");
      if (res.error == "0") {
        console.log(res);
        this.company_imgurl = res.result.picture_imgurl;
      }
    },
    beforeAvatarUpload(file) {
      console.log(file, this.$t("views.Set.groupInformation.50zhrfr0fgk0"));
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isGIF = file.type === "image/gif";
      const isImg = isJPG || isPNG || isGIF;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error(this.$t("views.Set.groupInformation.add1"));
      }
      if (!isLt2M) {
        this.$message.error(this.$t("views.Set.groupInformation.add2"));
      }
      return isImg && isLt2M;
    },
  },
  mounted() {},
};
</script>

<style lang="less">
.DataMaintenance-groupInformationSet-baseInfo {
  .content-box {
    flex: 1;
    margin-right: 10px;
    padding: 36px 16px;
  }

  .body {
    font-size: 14px;
    background-color: #fff;
    display: flex;
    .info {
      width: 600px;
      p {
        // width: 347px;
        margin-left: 20px;
        margin-bottom: 30px;
        color: #55606e;
        display: flex;
        em {
          width: 100px;
          color: #aaa;
          font-style: normal;
        }
        span {
          flex: 1;
          color: #333;
        }
      }
    }
    .upload {
      width: 220px;
      height: 220px;
      margin-left: 20px;
      .upload-img__title {
        margin-bottom: 15px;
        font-size: 18px;
        color: #333;
      }
      .el-upload-dragger,
      .el-upload {
        width: 220px;
        height: 220px;
        // margin-top: 10px;
        background-color: #f4f5f7;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-icon-upload {
          margin-top: 60px;
          font-size: 40px;
          color: #aaaaaa;
        }
        .el-upload__text {
          color: #aaaaaa;
          em {
            color: #00b0ff;
          }
        }
        .img-url {
          // width: 100%;
          // position: absolute;
          // left: 0;
          // top: 0;
          max-width: 100%;
          max-height: 100%;
          z-index: 2;
        }
      }
      .upload-img__tips {
        width: 220px;
        margin-top: 10px;
        color: #aaa;
        font-size: 10px;
        text-align: center;
      }
      .company-upload {
        width: 120%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
    }
  }
}
.DataMaintenance-groupInformationSet-baseInfo .body .upload .el-upload-dragger,
.DataMaintenance-groupInformationSet-baseInfo .body .upload .el-upload {
  width: 300px !important;
  height: 150px !important;
  padding: 10px;
  padding-right: 15px;
}
</style>
